<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link type="text/css" rel="stylesheet" href="../css/model/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="../css/model/swiper.css" />
		<link type="text/css" rel="stylesheet" href="../css/top.css" />
		<link type="text/css" rel="stylesheet" href="../css/book_detail.css" />

		<script type="text/javascript" src="../js/model/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../js/model/bootstrap.js"></script>
		<script type="text/javascript" src="../js/model/swiper.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script type="text/javascript" src="../js/model/reset_font.js"  ></script>
		<script type="text/javascript" src="../js/book_detail.js"></script>
		
		<title>优当借书网</title>
		<style>
			.lunbotu .swiper-container{
				width: 7.5rem;height: 7.5rem;
			}
			.lunbotu .swiper-container .swiper-wrapper .swiper-slide{
				width:7.5rem;height: 7.5rem;overflow: hidden;
			}
			.lunbotu .swiper-container .swiper-wrapper .swiper-slide img{
				width:7.5rem;height: 7.5rem;
			}
			#swiper-pagination2{
				position:absolute;
				width:0.64rem;margin-left:6.5rem;
				height: 0.34rem;line-height: 0.34rem;
				bottom: 0.2rem;
				background:rgba(0,0,0,0.4);
				box-sizing: border-box;
				border-radius: 0.8rem;
				color:#ffffff;
				text-align: center;
				font-size: 0.18rem;
			}
			.swiper-pagination.swiper-pagination-fraction {
				height: 0.34rem;line-height: 0.34rem;
				padding:0.01rem 0;
				border-radius: 0.8rem;
				position: absolute;
				margin-right: 0rem;
				font-size: 0.18rem;
				color: #FFFFFF;
				text-align: center;
				}
			
			.swiper-pagination-current,.swiper-pagination-total{
				font-size: 0.18rem;
			}
		</style>
	</head>
	
	<body>
		<!--top-->
		
			<!--默认样式-->
			<div class="top top1" style="display: none;">
				<a href="mall_index.html">
				<div class="goback goback1">
					<img src="../images/icons/goback1.png" />
				</div>
				</a>
				<div class="menu">
					<img src="../images/icons/menu0.png" />
				</div>
			</div>
			<!--/默认样式-->
			<!--下拉样式-->
			<div class="top top2" >
				<a href="mall_index.html">
				<div class="goback goback2">
					<img src="../images/icons/goback2.png" />
				</div>
				</a>
				<div class="nav" id="regUseBtn">
					<a class="navs nav_left Btnbutton " id="aaa" href="#content">
						<span class="position_pic position"></span>
						<span>蛋糕</span>
					</a>
					<a class="navs nav_center Btnbutton " name="#comment">
						<span class="position_pic"></span>
						<span>评价</span>
					</a>
					<a class="navs nav_right Btnbutton"name="#detail">
						<span class="position_pic"></span>
						<span>详情</span>
					</a>
				</div>
				<div class="menu">
					<img src="../images/icons/menu1.png" />
				</div>
			</div>
			
			<!--/下拉样式-->
		
		<!--/top-->
		<!--content-->
		<div class="content" id="content">
			<!--part1 轮播图-->
			<div class="lunbotu">
				<div class="swiper-container swiper-container-rap" id="pic-swiper">
					<div class="swiper-wrapper" style="padding:0" >
						<!--轮播图循环-->
						<div class="swiper-slide swiper-slide-pic" >
							<img src="../images/books/book.png"  />
						</div>
						<div class="swiper-slide swiper-slide-pic" >
							<img src="../images/books/booka.png" />
						</div>
						<!--轮播图循环结束-->
					</div>
					<div class="swiper-pagination swiper-pagination-fraction" id="swiper-pagination2">
						<div id="mypage">
							<!--<span class="swiper-pagination-current">1</span> / 
							<span class="swiper-pagination-total">2</span>-->
						</div>
										
					</div>
				</div>
				<script type="text/javascript">
					$(function(){
							setTimeout(myswiper,1000);
					})
					function myswiper(){
						var myswiper = new Swiper('.swiper-container-rap', {
								autoplay: 5000,
								pagination: '.swiper-pagination',
								paginationType : 'fraction',
								paginationClickable: true
							});
					}
										
				</script>
				<div class="shadow"></div>
			</div>
							<!-------------/轮播图----------------->
			<!--/part1 轮播图-->
			
			<!--part2 商品简介-->
			<div class="cake_title" >
				<div class="c_name">双花奶油纸杯蛋糕双花奶油纸杯蛋糕纸杯蛋糕</div>
				<!--<div class="c_text">上传产品时的一句话,没有就不展示</div>-->
				<div class="c_price font_red">
					<span>￥</span>
					<span class="cp_price">55.00</span>
				</div>
				<div class="enter">
					<img src="../images/book_detail/entr.png" />
					<div><a href="../#">进入店铺</a></div>
				</div>
			</div>
			<!--/part2 商品简介-->
			
			<!--part 3 请选择商品规格-->
			<div class="spgg">
				<a href="#">
					<span>请选择商品规格</span>
					<img src="../images/book_detail/arrow_r2.png" class="arrow_r" /> 
				</a>
			</div>
			<!--请选择商品结束-->
			
			<!--part4 用户评价-->
			<div class="comment" id="comment" >
				<div class="comment_top">
					<div class="c_top_text">
						<span class="line line1"></span>
						<img src="../images/book_detail/pingjia.png" />
						<span>评价</span>
						<span class="line line2"></span>
					</div>
				</div>
				<div class="comment_title">
					<span>商品评价</span>（<span class="pj_num">20</span>）
				</div>
				<div class="comment_con">
					<!--case1 没有评论的情况-->
					<div class="coment_con_1" style="display: none;">
						<div class="con_btn">
							<a href="#">
								暂时没有评价
							</a>
						</div>
					</div>
					<!--/case1 没有评论的情况-->
					
					<!--case2 有评论的情况-->
					<div class="comment_con_2" >
						<div class="username">
							<img src="../images/book_detail/users.png"  class="user_pic"/>
							<span>用户de名</span>
						</div>
						<div class="date">
							2017-12-30 01:55:55
						</div>
						<div class="usermsg">
							用户评论的语言，蛋糕还是很好的很新鲜，下次还会回购的蛋糕还是很好的很新鲜。用户评论的语言，蛋糕还是很好的很新鲜，下次还会回购的蛋糕还是很好的很新鲜。
						</div>
						<div class="all">
							<a href="book_comments.html">查看全部评论</a>
						</div>
					</div>
					<!--/case2 有评论的情况-->
				</div> 
			</div>
			<!--/part4 用户评价-->
			
			
			<!--part5 详情-->
			<div class="detail" id="detail">
				<div class="detail_top">
					<div class="c_top_text">
						<span class="line line1"></span>
						<img src="../images/book_detail/detail.png" />
						<span>详情</span>
						<span class="line line2"></span>
					</div>
				</div>
				<div class="detail_title">
					<div class="shortline"></div>
					<span class="spxx">商品信息</span>
				</div>
				<div class="detail_con">
					加厚的优质棉衣~只需要一眼就爱上它的味道。精致柔顺的毛领，凸显温暖优雅好气质，
					温暖过冬天！毛领是可以拆卸的哦！方便衣服洗涤！衣服层次分明的裁剪工艺，不仅能轻
					松装下小小身材，还能保暖贴肤，门襟是优质拉链，侧边做了一个精致的绑带设计，看上
					去更加fashion！
				</div> 
				<div class="goods_pic">
					<img src="../images/books/book.png" />
					<img src="../images/books/booka.png" />
				</div>
			</div>
			<!--/part5 详情-->
		</div>
		<!--content-->
		
		<!--footer-->
		<div class="footer">
			<!--底部左边 begin-->
		   <div class="footer_left">
		   	<div class="bot-one heart heart_un">
				<a href="#" >
					<img src="../images/book_detail/heart1.png" class="heart1"/>
					<img src="../images/book_detail/heart2.png" class="heart2" />
					<p class="save_text">收藏</p>
				</a>
			</div>
			<div class="bot-one">
				<a href="javascript:;" class="kefu" ><!--弹出面板-->
					<img src="../images/book_detail/msg.png" />
					<p>客服</p>
				</a>
			</div>
			
			<div class="bot-one buycar">
				<a href="../buycar.html">
					<img src="../images/book_detail/buycar.png" />
					<div class="toal-num">1</div>
					<p>借购车</p>
				</a>
			</div>
		   </div>
			<!--底部左边 the end-->
			<!--底部右边 begin-->
			<div class="btns">
				<a href="#"><input type="button" value="加入购物车" class="btn1 add_buy" /></a>
				<input type="button" value="立即购买" class="btn1 buy_it" />
			</div>
			<!--底部右边 the end-->
		</div>
		<!--/footer-->
		
		<!--客服弹窗 begin-->
		<div class="alert_kefu" style="display: none;">
			<span class="kefu_pic">
				<img src="../images/icons/message.png"  />
			</span>
		</div>
		<!--客服弹窗 the end-->
		
		<!--选择商品菜单-->
		<div class="grey" ></div>
		<div class="chose_item" >
			<form action="sub_order.html" class="" name="myform" method="post" onsubmit="return checkform()">
				<div class="chose_pic">
					<img src="../images/books/bookb.png" />
				</div>
				<div class="chose_top">
					<div class="cakemsg">
						<div class="cakeprice">
							<span class="hb">￥</span>
							<span class="price">119.00</span>
						</div>
						<div class="shut">
							<!--<img src="../images/book_detail/shut.png" />-->
						</div>
						<div class="top_text">
							<div class="un_chose" >
								<!--<span class="qxz">请选择</span>-->
								<!--<span>尺寸</span>&nbsp;<span>材料</span>&nbsp;<span>颜色</span>&nbsp;
								<span>蜡烛</span>&nbsp;<span>贺卡</span>-->
							</div>
							<div class="on_chose" style="display: none;">
								<!--<span class="qxz">已选：</span>-->
								<!--<span>"1寸"</span><span>"奶油蛋糕"</span>&nbsp;<span>"黄色"</span>&nbsp;
								<span>"蜡烛1"</span>&nbsp;<span>"贺卡1"</span>-->
							</div>
						</div>
					</div>
				</div>
				<div class="chose_con">
					<div class="chose_type un">
						<div class="type_top ">尺寸</div>
						<div class="type_body">
							<span class="">6cm~8cm</span>
							<span>8cm~10cm</span>
							<span>10cm~12cm</span>
							<span>12cm~15cm12cm~15cm12cm~15cm12cm~15cm12cm~15cm12cm~15cm</span>
							<span>>15cm</span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="chose_type un">
						<div class="type_top">材料</div>
						<div class="type_body">
							<span>植物奶油</span>
							<span>动物奶油</span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="chose_type un">
						<div class="type_top">颜色</div>
						<div class="type_body">
							<span>植物奶油</span>
							<span>动物奶油</span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="chose_type un">
						<div class="type_top">蜡烛</div>
						<div class="type_body">
							<span>数字</span>
							<span>动物</span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="chose_type un">
						<div class="type_top">颜色</div>
						<div class="type_body">
							<span>数字</span>
							<span>彩色</span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="goods_num un">
						<span>购买数量</span>
						<div class="change_num">
							<span class="dic"></span>
							<span class="nums">2</span>
							<span class="add"></span>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="chose_footer type2">
					<!--点击购物车显示的div-->
					<div class="chose_footer1">
						<!--<input type="button" class="" value="确定"/>-->
						<div class="comfirm">确定</div>
					</div>
					<!--/点击购物车显示的div-->
					<!--点击商品规格显示的div-->
					<div class="chose_footer2" >
						<input type="button" class="addbuy" value="加入购物车"/>
						<input type="button" class="buynow" value="立即购买"/>
					</div>
					<!--/点击商品规格显示的div-->
				</div>
			</form>
		</div>
		<!--/选择商品菜单-->
		
		<!--弹出框 菜单列表-->
		<div id='menu' style="display: none;">
			<ul>
				<li ><a href="mall_index.html"><img src="../images/icons/home.png"/><span>首页</span></a></li>
				<li ><a href="../me.html"><img src="../images/icons/me.png"/><span>我的</span></a></li>
				<li><a href="javascript:;" class="fenxiang"><img src="../images/icons/share.png"/><span>分享</span></a></li>
			</ul>
		</div>
		<!--/弹出框 菜单列表-->
		<!--分享-->
		<div class="alert_share" style="display: none;"></div>
		<!--/分享-->
		<!--white-->
		<div class="white" style="display: none;"></div>
	</body>

</html>